<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>理解插值表达式</h3>

        <p>姓名：{{name}}</p>
        <!-- 字符串的拼接 -->
        <p>{{name +'，你好'}}</p>
        <!-- 算术运算 -->
        <p>{{num/5}}</p>

        <p>{{num > 90 ? 'A+':'不是A+'}}</p>

        <p>method：{{test1()}}</p>
        <!-- 不能声明变量 -->
        <!-- {{var a = 1}} -->
        
        <!-- 不能写分支 -->
        <!-- {{ if(true) {} }} -->
        <!-- 不能访问除了vm实例中声明的数据 -->
        <!-- {{num123}} -->
    </div>


    <script>
        // 插值表达式： {{}}
        // 作用：输出值（把数据渲染到页面）

        // {{}} 中可以写什么
        // 1. data数据字段名
        // 2. methods函数名称，进行调用
        // 3. data数据字段进行表达式运算
        //   算术
        //   字符串拼接
        //   三元

        // {{}} 不可以写什么
        // 1. 不能写js语句：声明变量，分支，循环.....
        // 2. 不能访问除了vm实例中声明的数据

        // [Vue warn]: Property or method "num123" is not 
        // defined on the instance(实例) but referenced(引用) 
        // during render
        var num123 = 100

        const vm = new Vue({
            el: "#app",
            data: {
                name: 'vue',
                num: 80
            },
            methods: {
                test1 () {
                    console.log('test1')
                }
            }
            
        })
    </script>

</body>
</html>